<template>
  <div class="video">
    <div class="divBox" v-for="(item,index) in video_list" :key="index">
        <img class="img" :src="item.srcUrl"/>
        <img class="play" src="@/assets/images/videoCover/play.png"/>
        <p class="title">{{ item.title }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'video',
  data(){
    return{
      video_list:[
        {id:1,title:'折纸大师的仿真飞机（下）',srcUrl:(require('@/assets/images/videoCover/cover1.jpg'))},
        {id:2,title:'飞机是最早的互联网',srcUrl:require('@/assets/images/videoCover/cover2.jpg')},
        {id:3,title:'当兵乓球以“超音速”冲向物体，结果如何？',srcUrl:require('@/assets/images/videoCover/cover3.jpg')},
        {id:4,title:'中国北斗导航系统工作示意图',srcUrl:require('@/assets/images/videoCover/cover4.jpg')},
        {id:5,title:'圈内跑道数量最多的6个机场，第一名竟然是它！',srcUrl:require('@/assets/images/videoCover/cover5.jpg')},
        {id:6,title:'早期飞机合集（上）',srcUrl:require('@/assets/images/videoCover/cover6.jpg')},
        {id:7,title:'他完成了人类首次高音速飞行',srcUrl:require('@/assets/images/videoCover/cover7.jpg')},
        {id:8,title:'我国首个火星车“祝融”',srcUrl:require('@/assets/images/videoCover/cover8.jpg')},
        {id:9,title:'没有飞机的伞兵是如何进行训练的？',srcUrl:require('@/assets/images/videoCover/cover9.jpg')},
        {id:10,title:'点击查看更多视频',srcUrl:require('@/assets/images/videoCover/cover10.jpg')},
    ],
    }
  },
  created(){
  },
  methods:{

  }
} 
</script>

<style scoped>
.video{
    display: flex;
    flex-wrap: nowrap;
    overflow: scroll;
}
.divBox{
    position: relative;
}
img{
    width: 135px;
    height: 185px;
    border-radius: 5px;
    margin: 10px;
    
}
.video .title{
    color: white;
    z-index: 2;
    width: 125px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: absolute;
    top: 155px;
    left: 25px;
}
.play{
    width: 30px;
    height: 30px;
    z-index: 2;
    position: absolute;
    top: 125px;
    left: 12px;
    color: white;
}

</style>
